﻿<!DOCTYPE html>
<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="A class for saving / loading GoJS diagram model data to / from popular storage services" />
    <title>GoCloudStorageManager test</title>

    <!-- GoJS -->
    <script src="../../../release/go.js"></script>
    <!-- Go Cloud Storage Classes -->
    <script src="../lib/gcs.js"></script>

    <!-- CDN's -->
    <script src="https://apis.google.com/js/api.js"></script>
    <script src="https://js.live.net/v7.2/OneDrive.js"></script>
    <!-- both these are necesary for GoDropBox -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropbox.js/2.5.7/Dropbox-sdk.min.js"></script>
    <script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="3sm2ko6q7u1gbix"></script>

    <!-- CSS for GoCloudStorage/Manager -->
    <link rel="stylesheet" type="text/css" href="GoCloudStorageUI.css" />
</head>

<body onload="init()">

    <button onclick="handlePromise('New')">New</button>
    <button id="openButton" onclick="handlePromise('Load')">Load </button>
    <button id="removeButton" onclick="handlePromise('Delete')">Remove</button>
    <button id="saveButton" onclick="handlePromise('SaveAs')">Save As</button>
    <button id="saveButton" onclick="handlePromise('Save')">Save</button>
    <input type="checkbox" id="isAutoSavingCheckbox" checked /> <label for="isAutoSavingCheckbox">Autosave Enabled</label>
    <p>Current storage service: <span id="currentStorageSpan"></span> <button onclick="updateCurrentStorageSpan()">Change</button></p>

    <h3 id="currentFile">Untitled </h3>
    <div class="diagramBox">
        <h4>Diagram 1</h4>
        <div id="myDiagramDiv" style="height: 300px; width: 300px; background-color: lightgray;"></div>
    </div>
    <div class="diagramBox">
        <h4>Diagram 2</h4>
        <div id="myDiagramDiv2" style="height: 300px; width: 300px; background-color: lightgray;"></div>
    </div>

    <div id="text">
        <p>
            This sample showcases the <a href="../../../api/symbols/GoCloudStorageManager.html">GoCloudStorageManager</a>
            class,
            which bundles a user-defined set of <a href="../../../api/symbols/GoCloudStorage.html">GoCloudStorage</a>
            subclasses and allows for easy, graphical saving and loading of GoJS <a href="../../../../api/symbols/Diagram.html">Diagram</a>
            <a href="../../../../api/symbols/Model.html">Model</a> data to and from various cloud storage services.
            As of now, the supported services are:
            <ul>
                <li>Google Drive, managed with <a href="../../../api/symbols/GoGoogleDrive.html">GoGoogleDrive</a></li>
                <li>Microsoft OneDrive, managed with <a href="../../../api/symbols/GoOneDrive.html">GoOneDrive</a></li>
                <li>Dropbox, managed with <a href="../../../api/symbols/GoDropBox.html">GoDropBox</a></li>
                <li>Local Storage, managed with <a href="../../../api/symbols/GoLocalStorage.html">GoLocalStorage</a></li>
            </ul>
        </p>
        <p>
            GoCloudStorage subclasses are <a href="../../../intro/storage.html#GoCloudStorageSubclassConstruction">easy
                to construct</a>
            and can manage model data for any set of Diagrams on a page. All the GoCloudStorage subclasses
            <a href="../../../intro/storage.html#GoCloudStorageManager">managed by</a> the instance of
            GoCloudStorageManager displayed here handle file <a href="../../../intro/storage.html#SavingLoadingData">saving
                / loading</a>
            and file <a href="../../../intro/storage.html#CreatingRemovingData">creation / removal</a> for both Diagram
            1 and Diagram 2.
        </p>
        <p>
            <strong>Note</strong>: Any page that uses GoCloudStorage subclasses (other than GoLocalStorage) must be
            served from a web server to work.
        </p>
    </div>
    <script>

        var updateCurrentStorageSpan = function () {
            storageManager.selectStorageService().then(function (storage) {
                document.getElementById("currentStorageSpan").innerHTML = storage.serviceName;
            });
        }

        var isAutoSavingCheckbox = document.getElementById("isAutoSavingCheckbox");
        isAutoSavingCheckbox.addEventListener("change", function () {
            storageManager.storages.iterator.each(function (storage) {
                storage.isAutoSaving = isAutoSavingCheckbox.checked;
            });
        });

        var $ = go.GraphObject.make;
        myDiagram = $(go.Diagram, "myDiagramDiv", {
            initialContentAlignment: go.Spot.Center,  // center the content
            "undoManager.isEnabled": true  // enable undo & redo
        });

        myDiagram.nodeTemplate =
            $(go.Node, "Auto",  // the Shape will go around the TextBlock
                new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                $(go.Shape, "RoundedRectangle", { strokeWidth: 0 },
                    // Shape.fill is bound to Node.data.color
                    new go.Binding("fill", "color")),
                $(go.TextBlock,
                    { margin: 8 },  // some room around the text
                    new go.Binding("text", "key"))
            );

        // create the model data that will be represented by Nodes and Links
        myDiagram.model = new go.GraphLinksModel(
            [
                { key: "Alpha", color: "lightblue" },
                { key: "Beta", color: "orange" },
                { key: "Gamma", color: "lightgreen" },
                { key: "Delta", color: "pink" }
            ],
            [
                { from: "Alpha", to: "Beta" },
                { from: "Alpha", to: "Gamma" },
                { from: "Beta", to: "Beta" },
                { from: "Gamma", to: "Delta" },
                { from: "Delta", to: "Alpha" }
            ]);

        myDiagram2 = $(go.Diagram, "myDiagramDiv2", {
            initialContentAlignment: go.Spot.Center,  // center the content
            "undoManager.isEnabled": true  // enable undo & redo
        });

        myDiagram2.nodeTemplate = myDiagram.nodeTemplate.copy();

        // create the model data that will be represented by Nodes and Links
        myDiagram2.model = new go.GraphLinksModel(
            [
                { key: "Alpha", color: "lightblue" },
                { key: "Beta", color: "orange" },
                { key: "Gamma", color: "lightgreen" },
                { key: "Delta", color: "pink" }
            ],
            [
                { from: "Alpha", to: "Beta" },
                { from: "Alpha", to: "Gamma" },
                { from: "Beta", to: "Beta" },
                { from: "Gamma", to: "Delta" },
                { from: "Delta", to: "Alpha" }
            ]);

        defaultModel = myDiagram.model.toJson();

        // update the title on page to reflect newly loaded diagram title TODO
        var updateTitle = function () {
            if (storageManager.currentStorage.currentDiagramFile.path !== null) {
                var storage = storageManager.currentStorage;
                if (storage.currentDiagramFile.path) currentFile.innerHTML = storage.currentDiagramFile.path;
                else currentFile.innerHTML = storage.currentDiagramFile.name;
            }
            else {
                currentFile.innerHTML = "Untitled";
                storageTag.innerHTML = "Unsaved";
            }
        }

        /*
        * Promise handler for core functions
        * @param {String} action Accepted values: Load, Delete, New, Save
        */
        var handlePromise = function (action) {

            function handleFileData(action, fileData) {
                var words = [];
                switch (action) {
                    case 'Load': words = ['Loaded', 'from']; break;
                    case 'Delete': words = ['Deleted', 'from']; break;
                    case 'New': words = ['Created', 'at']; break;
                    case 'Save': words = ['Saved', 'to']; break;
                    case 'SaveAs': words = ['Saved', 'to']; break;
                }
                var storageServiceName = storageManager.currentStorage.serviceName;
                if (fileData.id && fileData.name && fileData.path) storageManager.showMessage(words[0] + ' ' + fileData.name + ' (file ID ' + fileData.id + ') ' +
                    words[1] + ' path ' + fileData.path + " in " + storageServiceName, 1.5);
                else console.log(fileData); // may have an explanation for why fileData isn't complete
                updateTitle();
            }

            switch (action) {
                case 'Load': storageManager.load().then(function (fileData) {
                    handleFileData(action, fileData);
                }); break;
                case 'Delete': storageManager.remove().then(function (fileData) {
                    handleFileData(action, fileData);
                }); break;
                case 'New': storageManager.create(true).then(function (fileData) {
                    handleFileData(action, fileData);
                }); break;
                case 'SaveAs': storageManager.save().then(function (fileData) {
                    handleFileData(action, fileData);
                }); break;
                case 'Save': storageManager.save(false).then(function (fileData) {
                    handleFileData(action, fileData);
                }); break;
            }
        }

        function init() {
            var diagrams = [myDiagram, myDiagram2];
            gls = new gcs.GoLocalStorage(diagrams, defaultModel, "../goCloudStorageIcons");
            god = new gcs.GoOneDrive(diagrams, 'f9b171a6-a12e-48c1-b86c-814ed40fcdd1', defaultModel);
            ggd = new gcs.GoGoogleDrive(diagrams, '16225373139-n24vtg7konuetna3ofbmfcaj2infhgmg.apps.googleusercontent.com', 'AIzaSyDBj43lBLpYMMVKw4aN_pvuRg7_XMVGf18', defaultModel);
            gdb = new gcs.GoDropBox(diagrams, '3sm2ko6q7u1gbix', defaultModel);
            storages = [gls, god, ggd, gdb];

            storageManager = new gcs.GoCloudStorageManager(storages);
            document.getElementById("currentStorageSpan").innerHTML = storageManager.currentStorage.serviceName;
        }

    </script>

</body>

</html>